<template>
  <div class="box">
    <div>
      <img src="../../assets/img/login.png" alt="" />
      <div class="tu">
        <img src="../../assets/img/orange.png" alt="" />
        <p>优 质 甄 选 丹 · 高 枕 无 忧</p>
      </div>
      <div class="li">
        <el-input
          class="ku"
          v-model="user.username"
          placeholder="请输您的用户名"
        ></el-input>
        <el-input
          class="ku"
          v-model="user.password"
          placeholder="请输入密码"
        ></el-input>
        <button @click="submit()">登录</button>
      </div>
    </div>
    {{ userInfo }}
  </div>
</template>

<script>
import { userlogin } from "../../request/api.js";
import { mapGetters, mapActions } from "vuex";
import { successAlert, warningAlert } from "../../utils/alert.js";
export default {
  data() {
    return {
      user: {
        username: "",
        password: "",
      },
    };
  },
  computed: {
    ...mapGetters({
      userInfo: "userInfo",
    }),
  },
  methods: {
    ...mapActions({
      asyncChnagUserInfo: "asyncChnagUserInfo",
    }),
    submit() {
      userlogin(this.user).then((res) => {
        if (res.data.code == 200) {
          successAlert(res.data.msg);
          this.asyncChnagUserInfo(res.data.list);
          this.$router.push("/");
        } else {
          warningAlert(res.data.msg);
        }
      });
    },
  },

  mounted() {
    // this.asyncChnagUserInfo();
  },
};
</script>

<style>
.box {
  width: 100vw;

  background: linear-gradient(to bottom, #ff6142, #ff897e);
}
img {
  width: 974px;
  height: 660px;
  padding-left: 500px;
  padding-top: 50px;
  position: relative;
}

.tu img {
  width: 400px;
  height: 80px;
  position: absolute;
  top: 160px;
  right: 184px;
}
.tu p {
  width: 400px;
  height: 80px;
  position: absolute;
  top: 358px;
  right: 163px;
  color: #999999;
  font-size: 30px;
}
.li {
  width: 400px;
  height: 80px;
  position: absolute;
  top: 510px;
  right: 212px;
}
.li .ku {
  border-bottom-color: #ff6142;
}
button {
  background-color: #ff6142;
  display: block;
  width: 400px;
  line-height: 33px;
  border-radius: 15px;
  border-style: none;
  color: #fff;
}
</style>